<template>
  <div class="recommend">
      <div v-for="(item,index) in recommends" :key="index" class="recommendItem">
          <a :href="item.link">
              <img :src="item.image" alt="">
              <div class="title">{{item.title}}</div>
          </a>
      </div>
  </div>
</template>

<script>
export default {
    name:'Recommend',
    props:{
        recommends:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data(){
        return{
            
        }
    }
}
</script>

<style lang='scss' scoped>
.recommend{
    display: flex;
    // width: 100%;
    text-align: center;
    font-size: 13px;
    padding: 10px 0 20px;
    border-bottom: 10px solid #eee;
    .recommendItem{
        flex: 1;
        img{
            width: 70px;
            height: 70px;
            margin-bottom: 10px;
        }
        .title{
            color: rgb(118, 118, 118);
        }
    }
}
</style>